import { reactive, onMounted, onBeforeUnmount, getCurrentInstance } from 'vue';
import page from './page.ts';
import { useRouter } from 'vue-router';

export function useListComponent() {
  const router = useRouter();
  const { proxy } = getCurrentInstance() as any;
  //页面信息
  const dataInfo: any = reactive({
    loading: false, //加载
    loadingMsg: '列表数据加载中', //加载
    //详情
    form: {
      text: '', //单文本输入框
      textSelect: '', //单文本输入框-单选下拉
      textDecs: '单文本输入框', //单文本输入框
      textarea:
        '今天（4月12日）白天，北京大风进入本次过程最强时段，平原地区阵风可达9至11级，山区局地13级以上，大风橙色预警信号生效中，公众非必要不外出。\n明天白天，北京大风持续，阵风仍有10级左右。后天，北京大风逐渐减弱、停歇。', //多文本输入框
      select: '', //单选下拉
      autocomplete: '', //自动补全
      selects: [1], //多选下拉
      number: null, //数字
      switch: 1, //开关
      rate: 3.2, //评分
      progress: 20, //进度条
      radio: null, //单选框
      checkbox: true, //单选框
      checkboxs: [], //单选框
      day: '', //日期
      days: [], //日期范围
      color: '', //颜色
      treeSelect: '', //树形选择
      img: '', //图片
      imgs: [], //图片组
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
      ], //排序
    },
    formArr: [
      {
        label: '滑块',
        key: 'progress',
        formType: 'slider', //文件类型 text
        //参数设置
        bind: {},
        //选中数据
        changeBtn: (item: any, row: any) => {
          console.log(item);
          console.log(row);
        },
      },
      {
        label: '进度条',
        key: 'progress',
        formType: 'progress', //文件类型 text
        //参数设置
        bind: {},
        //选中数据
        changeBtn: (item: any, row: any) => {
          console.log(item);
          console.log(row);
        },
      },
      {
        label: '自动补全',
        key: 'autocomplete',
        formType: 'autocomplete', //文件类型 text
        isRules: true, //必填
        //参数设置
        bind: {},
        AddKey: '',
        //搜索方法
        searchBtn: (value: string, row: any, dataInfo: any, getQuerySearch?: Function) => {
          proxy.$api.System.QueryPageDictionaryValueDataList({
            pageIndex: 1,
            pageSize: 9999,
            likeWords: value,
            dictionaryCode: 'PrintingMaterial',
            dicValueState: '-1',
          })
            .then((res: any) => {
              dataInfo.options = res.list.map((el: any) => ({
                ...el,
                value: el.displayValue,
              }));
              getQuerySearch;
            })
            .catch(() => {});
        },
        //添加方法
        addBtn: (value: string, dataInfo: any) => {
          proxy.$api.System.AddDictionaryValue({
            dictionaryCode: 'PrintingMaterial',
            displayValue: value,
          })
            .then((res: any) => {
              dataInfo.isNew = false;
              proxy.$message('添加成功');
            })
            .catch(() => {});
        },
        //选中数据
        changeBtn: (item: any, row: any) => {
          console.log(item);
          console.log(row);
        },
      },
      {
        label: '分片文件上传',
        formType: 'upload',
        //参数设置
        bind: {},
        fileFragmentation: (rawFile: any, row: any, chunkIndex: number, chunkCount: number) => {
          return new Promise((resolve, reject) => {
            console.log(`当前分片数：${chunkIndex}`);
            console.log(`总分片数：${chunkCount}`);
            setTimeout(() => {
              resolve({
                rawFile: rawFile,
                row: row,
                chunkIndex: chunkIndex,
                chunkCount: chunkCount,
              });
            }, 100);
          });
        },
        fileMerge: (rawFile: any, dataInfo: any) => {
          console.log(`开始合并分片`);
          console.log(rawFile);
          dataInfo.loading = false;
        },
      },
      {
        label: '图片组上传',
        key: 'imgs',
        formType: 'img',
        urlKey: 'url',
        //参数设置
        bind: {},
        operate: [
          {
            title: '下载',
            icon: 'Download',
            click: (row: any, index: any, arr: any) => {
              proxy.$downloadImg(row.url, row.name);
            },
          },
          {
            title: '删除',
            icon: 'Delete',
            click: (row: any, index: any, arr: any) => {
              arr.splice(index, 1);
            },
          },
        ],
        //上传文件
        changeBtn: (rawFile: any, row: any, dataInfo: any) => {
          console.log(rawFile);
          row.imgs.push({
            name: rawFile.fileName,
            url: rawFile.fileImg,
          });
          dataInfo.loading = false;
        },
      },
      {
        label: '单行输入框',
        key: 'text',
        formType: 'text', //文件类型 text
        isRules: true,
        //参数设置
        bind: {
          maxlength: 60, //最大输入长度
        },
        hidden: (row: any) => {
          return false;
        },
        changeBtn: (value: string, row: any) => {
          console.log(value);
          console.log(row);
        },
        //可选项
        select: {
          key: 'textSelect',
          width: 100,
          placeholder: '项目',
          labelName: 'label',
          valueName: 'value',
          options: [
            {
              label: '选项1',
              value: '1',
            },
            {
              label: '选项2',
              value: '2',
            },
          ],
        },
      },
      {
        label: '数字输入框',
        key: 'number',
        formType: 'number',
        //参数设置
        bind: {},
        changeBtn: (value: string, row: any) => {
          console.log(value);
          console.log(row);
        },
      },
      {
        label: '日期选择器',
        key: 'day',
        formType: 'day',
        //参数设置
        bind: {
          'disabled-date': (time: any) => {
            const today = new Date();
            today.setHours(0, 0, 0, 0); // 设置时间为当天的开始时间
            return time.getTime() < today.getTime();
          },
        },
        changeBtn: (value: string, row: any) => {
          console.log(value);
          console.log(row);
        },
      },
      {
        label: '日期范围选择器',
        key: 'days',
        formType: 'days',
        //参数设置
        bind: {
          'disabled-date': (time: any) => {
            const today = new Date();
            today.setHours(0, 0, 0, 0); // 设置时间为当天的开始时间
            return time.getTime() > today.getTime();
          },
        },
        changeBtn: (value: string, row: any) => {
          console.log(value);
          console.log(row);
        },
      },
      {
        label: '多行输入框',
        key: 'textarea',
        formType: 'textarea',
        //参数设置
        bind: {},
        changeBtn: (value: string, row: any) => {
          console.log(value);
          console.log(row);
        },
      },
      {
        label: '纯文本展示',
        key: 'textarea',
        formType: '',
      },
      {
        label: '单选下拉框',
        key: 'select',
        formType: 'select',
        //参数设置
        bind: {},
        options: 10000,
        changeBtn: (value: string, row: any, arr: any[]) => {
          console.log(value);
          console.log(row);
          console.log(arr);
        },
        //远程搜索
        remoteMethod: (query: string, item?: any) => {
          console.log('搜索内容：' + query);
          console.log(item.options);
        },
      },
      {
        label: '多选下拉框',
        key: 'selects',
        formType: 'select',
        //参数设置
        bind: {},
        options: 10,
        changeBtn: (value: string, row: any, arr: any[]) => {
          console.log(value);
          console.log(row);
          console.log(arr);
        },
      },
      {
        label: '树形选择下拉框',
        key: 'treeSelect',
        formType: 'treeSelect',
        //参数设置
        bind: {},
        options: [
          {
            value: '1',
            label: 'Level one 1',
            children: [
              {
                value: '1-1',
                label: 'Level two 1-1',
                children: [
                  {
                    value: '1-1-1',
                    label: 'Level three 1-1-1',
                  },
                ],
              },
            ],
          },
          {
            value: '2',
            label: 'Level one 2',
            children: [
              {
                value: '2-1',
                label: 'Level two 2-1',
                children: [
                  {
                    value: '2-1-1',
                    label: 'Level three 2-1-1',
                  },
                ],
              },
              {
                value: '2-2',
                label: 'Level two 2-2',
                children: [
                  {
                    value: '2-2-1',
                    label: 'Level three 2-2-1',
                  },
                ],
              },
            ],
          },
          {
            value: '3',
            label: 'Level one 3',
            children: [
              {
                value: '3-1',
                label: 'Level two 3-1',
                children: [
                  {
                    value: '3-1-1',
                    label: 'Level three 3-1-1',
                  },
                ],
              },
              {
                value: '3-2',
                label: 'Level two 3-2',
                children: [
                  {
                    value: '3-2-1',
                    label: 'Level three 3-2-1',
                  },
                ],
              },
            ],
          },
        ],
        changeBtn: (value: string, row: any, arr: any[]) => {
          console.log(value);
          console.log(row);
          console.log(arr);
        },
        //远程搜索
        remoteMethod: (query: string, item?: any) => {
          console.log('搜索内容：' + query);
          console.log(item.options);
        },
      },
      {
        label: '单选框',
        key: 'radio',
        formType: 'radio',
        //参数设置
        bind: {},
        options: 4,
        changeBtn: (value: string, row: any, arr: any[]) => {
          console.log(value);
          console.log(row);
          console.log(arr);
        },
      },
      {
        label: '确认多选框',
        key: 'checkbox',
        formType: 'checkbox',
        //参数设置
        bind: {
          label: '确认',
        },
        changeBtn: (value: string, row: any, arr: any[]) => {
          console.log(value);
          console.log(row);
          console.log(arr);
        },
      },
      {
        label: '多选框',
        key: 'checkboxs',
        formType: 'checkbox',
        //参数设置
        bind: {},
        options: 4,
        changeBtn: (value: string, row: any, arr: any[]) => {
          console.log(value);
          console.log(row);
          console.log(arr);
        },
      },
      {
        label: '开关',
        key: 'switch',
        formType: 'switch',
        //参数设置
        bind: {
          'active-value': 1, //switch 状态为 on 时的值
          'inactive-value': 0, //switch的状态为 off 时的值
          'active-text': '启用', //switch 打开时的文字描述
          'inactive-text': '禁用', //switch 的状态为 off 时的文字描述
          'inline-prompt': true, //无论图标或文本是否显示在点内，只会呈现文本的第一个字符
        },
        changeBtn: (value: string, row: any) => {
          console.log(value);
          console.log(row);
        },
      },
      {
        label: '评分',
        key: 'rate',
        formType: 'rate',
        //参数设置
        bind: {
          texts: ['糟糕', '较差', '一般', '良好', '优秀'],
          colors: ['#e13335', '#FF9900', '#67c23a'],
          // 'score-template': '{value} 分',
        },
        changeBtn: (value: string, row: any) => {
          console.log(value);
          console.log(row);
        },
      },
      {
        label: '颜色',
        key: 'color',
        formType: 'color',
        //参数设置
        bind: {},
        changeBtn: (value: string, row: any) => {
          console.log(value);
          console.log(row);
        },
      },
      {
        label: '单文件上传',
        formType: 'upload',
        //参数设置
        bind: {},
        changeBtn: (rawFile: any, row: any, dataInfo: any) => {
          row.img = rawFile.fileImg;
          dataInfo.loading = false;
        },
      },
      {
        label: '预览图',
        key: 'img',
        formType: 'img',
        //参数设置
        bind: {},
      },
    ],
    //打印内容
    print: {
      list: [],
      getPrint: (data: any, fun: Function) => {
        proxy.$api.OrderBusniess.GetPageSaleOrderGroup({
          pageIndex: 1,
          pageSize: 50,
          queryDataBaseFiled: 'xieYiShuHao',
          likeWords: '',
          isShowDisabled: 0,
          saleOrderGroupState: -1,
          onlySelf: 0,
          beginTime: '',
          endTime: '',
          total: 3,
        })
          .then((res: any) => {
            let _arr: any[] = [];
            res.list.forEach((el: any) => {
              _arr.push(
                ...el.saleOrderList.map((child: any) => ({
                  ...child,
                  customerName: el.customerName,
                  saleOrderGroupNumber: el.saleOrderGroupNumber,
                  creatorName: el.creatorName,
                  pageBreak: true,
                })),
              );
            });
            data.list = _arr;
            fun();
          })
          .catch(() => {
            dataInfo.loading = false;
          });
      },
    },
  });

  // 组件挂载后执行
  onMounted(() => {});
  // 组件卸载前执行
  onBeforeUnmount(() => {});
  return { dataInfo };
}
